<layout
  th:replace="~{views/layout :: layout (
  page = 'categories',
  title = ${site.title} + ' - ' + '分类',
  pin = ~{::pin},
  header = ~{::header},
  main = ~{::main}
  )}"
>
  <!--/* pin */-->
  <th:block th:fragment="pin">
    <style th:inline="css">
      .above {
        background-image: /*[(${'url('+theme.config.categories.above_background+')'})]*/ none;
      }
    </style>

    <script id="pageScript" th:inline="javascript">
      window.MainApp.data =  /*[[${categories}]]*/ [];

      Object.assign(window.MainApp.conf, {
        //第一屏
        enable_above: /*[[${theme.config.categories.enable_above}]]*/ '',
        above_background: /*[[${theme.config.categories.above_background}]]*/ '',
      });
    </script>
  </th:block>

  <!--/* header */-->
  <th:block th:fragment="header">
    <header th:class="${not theme.config.categories.enable_above ? 'header dp' : 'header'}">
      <!--/* 导航栏 */-->
      <th:block th:replace="~{views/nav}"/>

      <!--第一屏内容-->
      <section class="above" th:if="${theme.config.categories.enable_above}">
        <div class="above-info">
          <h1 class="above-title">分类</h1>
        </div>
      </section>
    </header>
  </th:block>


  <!--/* 內容 */-->
  <th:block th:fragment="main">
    <section class="content card" th:with="noData = ${not #lists.isEmpty(categories)}">
      <th:block th:if="${noData}">
        <div class="chart"></div>
      </th:block>

      <th:block th:unless="${noData}" th:insert="~{views/components:: emptyData(false)}"></th:block>
    </section>
    <th:block th:replace="~{views/aside::common}"/>
  </th:block>
</layout>